<template>
  <div>
    <a-spin :spinning="isLoading">
      <a-form :model="props.detailData" name="edit-form" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
        autocomplete="off">
        <br>
        <a-form-item label="联系方式">
          {{ detailData.phone }}
        </a-form-item>
        <a-form-item label="语言">
          {{ detailData.language_cn }}
        </a-form-item>
        <a-form-item label="状态" disabled>
          {{ detailData.status_text }}
        </a-form-item>
        <a-form-item label="提交日期">
          {{ detailData.add_date }}
        </a-form-item>
        <a-form-item label="回复记录">
          <a-table bordered :data-source="detailData.logs" :columns="dataListColumns" rowKey="id" :pagination="false">
          </a-table>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getContactMeDetail } from "@/api/admin";   //引入api

const props = defineProps(['detailId']);  // 接收父组件传参
const isLoading = ref(false);    // 控制loading

const detailData = ref({});  // 详情数据

// 数据列表字段
const dataListColumns = [
  {
    title: '回复人姓名',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '回复人职位',
    dataIndex: 'position',
    width: 150,
  },
  {
    title: '回复内容',
    dataIndex: 'content',
    customCell: (value, record, index) => {
      return {
        style: {
          whiteSpace: 'pre-wrap', // 保持原样式，内容自动换行
          wordBreak: 'break-word',
          overflow: 'visible', // 内容超出也不隐藏
        },
      };
    },
  },
  {
    title: '回复时间',
    dataIndex: 'create_time',
    width: 110
  },
];

//根据参数id获取数据
const getDetailById = () => {
  isLoading.value = true;
  getContactMeDetail({ id: props.detailId }).then((res) => {
    isLoading.value = false;
    if (res === false) return;

    detailData.value = res.data;
  }).catch((rej) => {
    isLoading.value = false;
    message.error('获取数据失败：' + rej);
  });
}

// 页面加载完成后，获取数据列表
onMounted(() => {
  getDetailById();
})
</script>

<style scoped>
/* 以下都是antd的样式 */
/* 数据列表--没有数据时显示的内容左右居中 */
:deep(.ant-table-tbody .ant-table-placeholder .ant-table-cell .ant-empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>